<template>
  <div class="good" @click="gotoDetail">
    <img v-lazy="getImg" alt="" @load="imgloaed">
    <div class="good-info">
      <p>{{good.title}}</p>
      <span class="price">¥{{good.price}}</span>
      <span class="collect">{{good.cfav}}</span>
    </div>
  </div>
</template>

<script scoped>
export default {
   name: 'GoodItem',
   props: {
     good: {
       type: Object,
       default: {}
     }
   },
   computed: {
     getImg() {
       return this.good.img || this.good.image || this.good.show.img
     }
   },
   methods: {
     imgloaed() {
      this.$bus.$emit('imgloaed')
     },
     gotoDetail() {
       //获得id
       let id = this.good.iid || this.good.item_id
       console.log(this.good.item_id,2222222222222)
       this.$router.push(`/detail/${id}`)
     }
   },
  //   watch: {
  //   $route(to, from) {
  //     console.log(to);//??????

  //     // 对路由变化作出响应...
  //     // if(from.params.id !==to.params.id) {
  //     //   this.$router.push(`/detail/${id}`)
  //     // }
  //   }
  // }
}
</script>

<style lang='less' scoped>
  .good {
    width: 48.8%;
    margin-bottom: 0.15rem;
    img {
      width: 100%;
      height:5.2rem;
    }
    .good-info {
      font-size: .24rem;
      p {
        .ellipsis();
        margin-bottom: .06rem;
      }
      .price {
        color: @color-high-text;
        margin-right: .4rem;
      }
      .collect {
        position: relative;
        &:before {
          content: '';
          position: absolute;
          left: -15px;
          top: 0;
          width: 14px;
          height: 14px;
          background: url("~assets/img/common/collect.svg") 0 0/14px 14px;
        }
      }
    }
  }
</style>
